<template>
  <div style="padding: 1rem;">
    <!-- <el-row>
      <el-col>
        <div style="margin-bottom: 1rem;">
          <el-image
            style="width: 100%; height: auto;"
            :src="require('@/assets/home-img.png')"
            fit="fill"
          />
        </div>
      </el-col>
    </el-row> -->
    <el-row>
      <el-col><div style="padding: 20px;font-size: 16px;font-weight: 600;">
        数据统计情况：
      </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="10" v-if="this.cookiesRole == '[2]'||this.cookiesRole == '[0]'">
        <div class="card-model-box" style="min-height: 470px; margin: 0 1rem 1rem 0;">
          <div class="clearfix">
            <div class="bar-title">人员资质</div>
            <div style="margin-left: 50%;">
              <el-select size="mini" v-model="typeValue" v-loading="loading" :placeholder="options[0].label" @change="getType($event)">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <pie-chart v-if="flag" :pie-chart-data="pieChartData" />
        </div>
      </el-col>
      <el-col :span="14" v-if="this.cookiesRole == '[1]'||this.cookiesRole == '[0]'">
        <div class="card-model-box" style="margin-bottom: 1rem;">
          <div class="bar-title">建筑企业</div>
          <line-chart v-if="lineChartData.actualData.lenght || lineChartData.expectedData.length" :line-chart-data="lineChartData" />
        </div>
      </el-col>
    </el-row>
    <el-row v-if="this.cookiesRole == '[3]'||this.cookiesRole == '[0]'">
      <el-col>
        <div class="card-model-box" style="margin-bottom: 1rem;">
          <div class="bar-title">工程项目</div>
          <e-bar v-if="barData.actualData.lenght || barData.expectedData.length" :bar-data="barData" />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import EBar from './components/EBar.vue'
import PieChart from './components/PieChart'
import lineChart from './components/LineChart'
import { getProfePerCount, getProjectTypeCount, getRegPerCount, getZzTypeComCount } from '@/api/homePage'
import moment from 'moment'
import Cookies from 'js-cookie'
export default {
  name: 'DataStatistics',
  components: {
    PieChart, lineChart, EBar
  },
  data() {
    return {
      panelData: {},
      pieChartData: [],
      lineChartData: {
        actualData: [],
        expectedData: []
      },
      barData: {
        actualData: [],
        expectedData: []
      },
      typeValue: '0',
      options: [{
        value: '0',
        label: '注册人员'
      }, {
        value: '1',
        label: '职称人员'
      }],
      loading: false,
      flag: false,
      cookiesRole:null
    }
  },
  created() {
    this.cookiesRole = Cookies.get('role')
    if(this.cookiesRole == '[1]' || this.cookiesRole == '[0]'){
      this.getCom()
    }
    if(this.cookiesRole == '[2]' || this.cookiesRole == '[0]'){
    this.getType(this.typeValue)
    }
    if(this.cookiesRole == '[3]' || this.cookiesRole == '[0]'){
      this.getPro()
    }
  },
  methods: {
    getPro(){
        // 项目
        getProjectTypeCount().then((res) => {
        if (res.code === 200) {
          res.data.ProfePerCountData.forEach(item => {
            this.barData.actualData.push(item.ProfePerName)
            this.barData.expectedData.push(item.count)
          })
        }
      })
    },
    getCom() {
      // 企业数
      getZzTypeComCount().then((res) => {
        if (res.code === 200) {
          res.data.ComCountData.forEach(item => {
            this.lineChartData.actualData.push(item.ZzTypeName)
            this.lineChartData.expectedData.push(item.count)
          })
        }
      })
    },
    // 人员
    getType(v) {
      this.typeValue = v
      this.pieChartData = []
      this.loading = true
      this.flag = false

      if (v === '0') {
        // 注册人员
        getRegPerCount().then((res) => {
          if (res.code === 200) {
            this.flag = true
            this.loading = false
            res.data.RegPerCountData.forEach((item) => {
              this.pieChartData.push({ name: item.RegPerName, value: item.count })
            })
          }
        })
      } else if (v === '1') {
        // 职称人员
        getProfePerCount().then((res) => {
          if (res.code === 200) {
            this.flag = true
            this.loading = false
            res.data.ProfePerCountData.forEach((item) => {
              this.pieChartData.push({ name: item.ProfePerName, value: item.count })
            })
          }
        })
      }
    },
    myDateFormat(date, fmt = 'YYYY-MM-DD') {
    // eslint-disable-next-line no-undef
      return moment(date).format(fmt)
    }
  }
}
</script>

<style lang="scss" scoped>
.card-model-box{
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}
.card-model-boxcontent{
  color: #C8C8C8;
  font-size: 13px;
  min-height: 160px;
}
.bar-title{
  position: relative;
  text-indent: 1rem;
  // margin-left: 45px;
}
.bar-title:before{
position: absolute;
top: 0;
left: 0px;
content: '';
width: 3px;
height: 100%;
background-color: #409eff;
margin-right: 10px;
}
.clearfix{
  display: flex;
  justify-content: space-between;
  align-items: start;
}
</style>
